<template>
  <div class="deviceFault">
    <van-nav-bar title="设备故障" left-arrow="" @click-left='goBack()'></van-nav-bar>
    <div class="area">
      <van-cell title="设备区域" value-class='areaDown'>
        <div slot='default'>
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="areas" />
          </van-dropdown-menu>
        </div>
      </van-cell>
      <van-field v-model="deviceName" required="" :error-message="errMsg" @input='getObscureDevice' label="设备名称"
        :clearable="true" placeholder="请输入设备名称"></van-field>
      <van-overlay :show="show" @click="show = false">
        <van-cell @click='getDeviceName(item.facilityname,item.id)' v-for="(item,i) in deviceList" :key='i' :title="item.facilityname"></van-cell>
      </van-overlay>
      <!-- <div class="beArea">
				<van-cell title="设备区域" required="">
					<van-dropdown-menu>
					  <van-dropdown-item v-model="area" :options="areas"/>
					</van-dropdown-menu>
				</van-cell>
			</div> -->
      <!-- <van-cell title="设备区域" :value="area"></van-cell> -->

      <van-cell title="发起人" :value="userName"></van-cell>
      <van-field v-model="message" required="" rows="3" :clearable="true" autosize label="故障内容" type="textarea"
        maxlength="50" placeholder="请输入故障内容" show-word-limit />
      <div class="btn">
        <van-button type="primary" size="large" color="#62cff9" @click='save'>保存</van-button>
      </div>
    </div>

    <!-- 设备所属 -->
    <!-- <van-popup v-model="showDeparts" position="top">
			<p class="popupTitile">设备所属
				<img class="upImg" src="../../assets/imgs/up.png" />
			</p>
			<div class="belogContainer">

				<ul class="depart">
					<li class="departTitle">部门</li>
					<li v-for="(item,i) in departs" :key='i' :class="{'activeDepart':activeDepartIndex === i}" @click="selectDepart(item,i)">{{item.name}}</li>
				</ul>
				<ul class="bglog-area">
					<li>地区</li>
					<li v-for="(item,i) in areas" :class="{'activeDepart':activeAreaIndex === i}" @click="selectArea(item,i)">{{item.name}}</li>
				</ul>
			</div>
		</van-popup> -->
  </div>
</template>

<script>
  let moment = require('moment')
  import {
    Toast
  } from 'vant'
  export default {
    data() {
      return {
        value1: '',
        areas: [],
        errMsg: '',
        show: false,
        area: '',
        num: '',
        deviceName: '',
        radio: 0,
        allDevcieList: [],
        deviceList: [],
        userName: '',
        message: '',
        value: 0,
        showDeparts: false,
        depart: '',
        area: '',
        activeDepartIndex: null,
        activeAreaIndex: null,
        departs: [{
            name: '储罐区1',
            value: 0
          },
          {
            name: '储罐区2',
            value: 1
          },
          {
            name: '储罐区3',
            value: 2
          }
        ],


      }
    },
    watch: {
      deviceName(newVal) {
      },
    },
    created() {
      this.getAllArea()
      this.userName = JSON.parse(localStorage.cksLoginInfo).userName
    },
    methods: {
      //获取全部设备区域
      getAllArea() {
        this.$axios.get('/Facility/queryArea.do').then(res => {
          if (res.data.status === 200) {
            res.data.msg.forEach(item => {
              this.areas.push({
                text: item.name,
                value: item.name
              })
            })
          }
        })
      },
      getAreaById() {
        this.$axios.post('/Maintenance/selectArea.do', {
          facilityname: this.deviceName
        }).then(res => {
          if (res.data.status === 200) {
            this.area = res.data.msg.name
          }
        })
      },
      //根据输入的设备名字获得具体的设备名称
      getDeviceName(name, id) {
        this.deviceName = name
        this.num = id
        // this.getAreaById()
        //this.matchDeviceName()
      },
      //模糊查询获得设备列表
      getObscureDevice() {
        this.$axios.post('/Maintenance/obscureFacility.do', {
          facilityName: this.deviceName
        }).then(res => {
          if (res.data.status === 200) {

            this.deviceList = res.data.msg
            if(this.deviceList.length>0){
              this.show = true
            }
           // this.matchDeviceName()
            if (!this.deviceName) {
              this.allDevcieList = res.data.msg
            }
          }
        })
      },
      //匹配设备名称
      matchDeviceName(){
        if (this.deviceList.length === 0) {
          return this.errMsg = '请输入正确的设备名称'
        } else {
          this.show = true
          this.errMsg = ''
          this.deviceList.some(item => {
            if (item.facilityname == this.deviceName) {
              this.errMsg = ''
              return true
            } else {
              this.errMsg = '请输入正确的设备名称'
            }
          })
        }
      },
      /* getFacility() {
      	if(!this.num) return
        this.$axios.post("Facility/selectFacility.do",{id:this.num}).then(res => {
          if (res.data.status === 200) {
            this.deviceName = res.data.msg[0].facilityname
          }
        });
      }, */
      //添加故障
      save() {
        //if (this.errMsg) return
        if (this.deviceName && this.message && this.value1) {
          let newTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
          newTime.trim()
          let id = newTime.replace(
            /[\s|\~|`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g, ""
          );
          id = id.substring(0, 14)
          id = 'WXXQ' + id
          this.$axios.post('/Maintenance/addMaintenance.do', {
            facilityid: this.deviceName,
            /* id: id, */
            areaid: this.value1,
            content: this.message,
            starttime: newTime,
            versionNumber: ''
          }).then(res => {
            if (res.data.status === 200) {
              Toast.success({
                message: '保存成功！',
                duration: 900
              })
              setTimeout(() => {
                this.$router.push({
                  name: 'main'
                })
              }, 900)
            } else {
              Toast({
                message: '保存失败'
              })
            }
          }).catch(err => {
            Toast.fail({
              message: '保存失败'
            })
          })


        } else {
          Toast.fail({
            message: '请输入完整信息！',
            duration: 900
          })
        }


      },
      //选择客户归属部门
      selectDepart(item, i) {
        this.activeAreaIndex = null
        this.area = ''
        this.depart = ''
        this.activeDepartIndex = i
        this.depart = item.name
      },
      //选择客户归属地区
      selectArea(item, i) {
        this.area = ''
        this.activeAreaIndex = i
        this.area = item.name
        this.showDeparts = false
      },
    }
  }
</script>

<style scoped="scoped">
  .areaDown {
    flex: 2.8 !important;
  }

  .van-overlay {
    top: 8.6rem;
  }

  .beArea .van-cell__title {
    flex: 0.76;
  }

  .activeDevice {
    color: #17ABE3;
  }

  .belongClass {
    color: #323233;
    font-size: .88rem;
  }

  .van-cell__value {
    flex: 2;
    text-align: left;
  }

  .upImg {
    vertical-align: middle;
  }

  .activeDepart {
    color: #17ABE3;
  }

  .area {
    overflow: scroll;
  }

  .popupTitile {
    font-size: .87rem;
    text-align: center;
    margin: 0;
    margin-top: .5rem;
  }

  .van-popup--center {
    top: 40%;
    border-radius: 8px;
    width: 76%;
    padding-bottom: 30px;
  }

  .belogContainer {
    padding: 1rem 3rem;

    display: flex;
    justify-content: space-between;
  }

  .depart,
  .bglog-area {
    font-size: .86rem;
    color: #333333;
  }

  .depart li,
  .bglog-area li {
    padding: .7rem;
  }

  .departTitle {
    text-align: center;
  }

  .default {
    float: left;
  }

  .cellTitle {
    width: 5.625rem;
    flex: 1;
  }

  .cellValue {
    text-align: left;
    flex: 3;
  }

  .van-cell {
    line-height: 1.25rem;
    font-size: .88rem;
    border-bottom: 1px solid whitesmoke;
  }

  .van-dropdown-menu {
    height: 1.25rem;
    line-height: 1.25rem;
  }

  .van-button--large {
    margin-top: 1rem;
    height: 2.3rem;
    line-height: 2.3rem;
  }

  .btn {
    padding: .6rem;
  }
</style>
